<template>
  <u-navbar
    title="邀请海报"
    :background="{ background: '#111723' }"
    back-icon-color="#fff"
    title-color="#fff"
    :title-bold="true"
    :border-bottom="false"
  ></u-navbar>
  <view class="app invite">
    <view
      style="
        position: fixed;
        top: 110rpx;
        right: 50rpx;
        color: #fff;
        z-index: 999;
      "
      @click="yaoqing"
    >
    </view>
    <!-- 背景图片 -->
    <view class="head" style="display: none">
      <image src="@/static/images/fenxiangbeijing.png" mode="widthFix"></image>
    </view>
    <!-- 绘制好的二维码 -->
    <view class="eqcode" style="display: none">
      <!-- <tki-qrcode ref='qrcode' size=200 :val='qrcodeText' :loadMake='true'></tki-qrcode> -->
      <image src="@/static/images/logo.png"></image>
    </view>
    <!-- 按钮 -->
    <view class="tags" style="display: none">
      <view @tap="handleActive(2)">长按保存图片</view>
    </view>

    <!-- 绘制好的海报 -->

    <!-- 这里使用img而非image ，是因为Safari浏览器无法无别图片，导致不能长按下载 -->
    <img :src="base64" alt="" class="immm" />
    <!-- <image :src="base64" mode="aspectFit" class="immm" ></image>	 -->
    <view
      style="
        text-align: center;
        color: #fff;
        position: fixed;
        bottom: 30rpx;
        left: 100rpx;
        z-index: 9;
        width: 230rpx;
        height: 60rpx;
        line-height: 60rpx;
        border: 1px solid #ccc;
        border-radius: 16rpx;
      "
    >
      长按保存图片</view
    >
    <view class="fuzhi" @click="fuzhi">复制分享链接</view>
    <!-- 画布 canvas不能直接隐藏，所以我这里是使用定位将图片移除屏幕外-->
    <view class="canvas">
      <canvas
        canvas-id="firstCanvas"
        id="firstCanvas"
        style="height: 100vh; width: 100%; margin: 0"
      ></canvas>
    </view>
    <view class="canvas">
      <canvas
        id="qrcode"
        canvas-id="qrcode"
        :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }"
      />
    </view>
    <view class="canvas">
      <canvas
        id="qrcode2"
        canvas-id="qrcode2"
        :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }"
      />
    </view>
  </view>
</template>

<script>
import config from '@/utils/config'
import uQRCode from '@/utils/qrcode'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
import { default as useUserStore } from '@/store/modules/userInfo'
import { storeToRefs } from 'pinia'
const store = useUserStore()
const { userInfo } = storeToRefs(store)
export default {
  components: {
    tkiQrcode
  },
  data() {
    return {
      maskShow: false,
      EQShow: false,
      base64: '', // 海报
      sys: {}, // 设备信息
      HH: 0, // 屏幕窗口高度
      WW: 0, // 屏幕窗口宽度
      qrcodeSize: 0, // 二维码大小
      qrcodeSrc: '', // 二维码
      qrcodeSrcLogo: '', // 带logo的二维码
      qrcodeText: '', // 二维码内容,如果是地址前面建议写上http/https
      bgimg: '../../static/images/fenxiangbeijing.png', // 背景图
      logo: '../../static/images/logo.png', // logo图,
      user: {
        head_portrait: {}
      }
    }
  },
  onLoad(option) {
    let sys = this.$u.sys() // 获取设备信息
    this.sys = sys
    this.HH = sys.windowHeight // 屏幕可用高度
    this.WW = sys.windowWidth // 屏幕可用宽度
    this.qrcodeText = '分享'
    if (this.user.head_portrait_id == null) {
    } else {
      this.logo = this.user.head_portrait.url
    }
    this.qrcodeText =
      config.h5 + '/pages/login/register?type=0&code=' + userInfo.value.mobile
    this.makeEQ() // 生成二维码
    this.make_canvas()
  },
  methods: {
    handleActive(index) {
      switch (index) {
        case 1:
          this.maskShow = !this.maskShow
          break
        case 2:
          this.EQShow = !this.EQShow
          break
      }
    },
    // 绘画 canvas海报
    make_canvas(bgImg, eqCode, logo) {
      if (!bgImg) {
        return
      }
      uni.showLoading({
        //增加loading等待效果
        mask: true
      })
      let that = this
      let ctx = uni.createCanvasContext('firstCanvas') //绑定画布
      ctx.setFillStyle('#171717') // 海报背景色
      ctx.fillRect(0, 0, that.WW, that.HH + 200) // 海报背景色参数以此：x轴 y轴 宽 高
      // ctx.drawImage(file,x,y,w,h)
      // file: 图片文件
      // x： x轴位置
      // y:  y轴位置
      // w:  宽
      // h： 高
      // 图片大小不同的话，需要自己去调整位置与宽高，这是个细致活
      ctx.drawImage(bgImg.tempFilePath, 0, 0, that.WW, that.HH - 100) //填充进图片 背景
      ctx.setFillStyle('#171717')
      ctx.fillRect(0, that.HH - 100, that.WW, 200)
      ctx.setFillStyle('#FFFFFF')
      ctx.setFontSize(14)
      ctx.fillText('来', (that.WW - 300) / 2 + 20, that.HH - 55)
      ctx.setFillStyle('#f6bf50')
      ctx.setFontSize(14)
      ctx.fillText('星艺藏品', (that.WW - 300) / 2 + 36, that.HH - 55)
      ctx.setFillStyle('#fff')
      ctx.setFontSize(14)
      ctx.fillText('，成为数字收藏家', (that.WW - 300) / 2 + 93, that.HH - 55)
      ctx.setFillStyle('#fff')
      ctx.fillRect((that.WW - 300) / 2 + 225, that.HH - 85, 70, 70)
      ctx.drawImage(
        eqCode.tempFilePath,
        (that.WW - 300) / 2 + 230,
        that.HH - 80,
        60,
        60
      ) //填充进图片 二维码
      ctx.drawImage(
        logo.tempFilePath,
        (that.WW - 300) / 2 + 255,
        that.HH - 55,
        10,
        10
      ) //填充进图片 logo
      ctx.setFillStyle('#b3b3b3')
      ctx.setFontSize(12)
      ctx.fillText(
        '发现你热爱的数字藏品',
        (that.WW - 300) / 2 + 20,
        that.HH - 25
      )
      ctx.draw() //输出到画布中
      setTimeout(() => {
        //不加延迟的话，base64有时候会赋予undefined
        uni.canvasToTempFilePath({
          canvasId: 'firstCanvas',
          success: (res) => {
            this.base64 = res.tempFilePath
          }
        })
        uni.hideLoading()
      }, 300)
    },
    // 绘制 带logo的二维码
    makeEQLogo(eqCode, logo) {
      let that = this
      let ctx = uni.createCanvasContext('qrcode2') //绑定画布
      ctx.drawImage(eqCode.tempFilePath, 0, 0, that.qrcodeSize, that.qrcodeSize) //填充进图片 二维码
      ctx.drawImage(
        logo.tempFilePath,
        that.qrcodeSize / 2 - that.qrcodeSize / 5 / 2,
        that.qrcodeSize / 2 - that.qrcodeSize / 5 / 2,
        that.qrcodeSize / 5,
        that.qrcodeSize / 5
      ) //填充进图片 logo
      ctx.draw() //输出到画布中
      setTimeout(() => {
        uni.canvasToTempFilePath({
          canvasId: 'qrcode2',
          success: (res) => {
            this.qrcodeSrcLogo = res.tempFilePath
          }
        })
        uni.hideLoading()
      }, 300)
    },
    // 下载画布需要的图片
    uploadImg() {
      let that = this
      // 二维码图
      const promise1 = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: that.qrcodeSrc,
          success: function (res) {
            resolve(res)
          },
          fail: function (res) {}
        })
      })
      // 背景图
      const promise2 = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: that.bgimg,
          success: function (res) {
            resolve(res)
          }
        })
      })
      // logo
      const promise3 = new Promise((resolve, reject) => {
        uni.downloadFile({
          url: that.logo,
          success: function (res) {
            resolve(res)
          }
        })
      })
      //  return
      Promise.all([promise1, promise2, promise3]).then((values) => {
        this.make_canvas(values[1], values[0], values[2]) // 绘制海报
        this.makeEQLogo(values[0], values[2]) // 绘制二维码 带logo
      })
    },
    // 生成二维码
    makeEQ() {
      let that = this
      this.qrcodeSize = that.WW / 2.1 // 二维码大小
      uQRCode
        .make({
          canvasId: 'qrcode',
          text: that.qrcodeText,
          size: that.qrcodeSize
        })
        .then((res) => {
          that.qrcodeSrc = res.tempFilePath
          setTimeout((re) => {
            that.uploadImg() // 开始 本地下载图片
          }, 1000)
        })
    },
    yaoqing() {
      //   uni.navigateTo({
      //     url: '../wodeyaoqing/wodeyaoqing'
      //   })
    },
    fuzhi() {
      uni.setClipboardData({
        data: this.qrcodeText,
        success: (res) => {
          uni.showToast({
            title: '分享链接已复制',
            icon: 'success'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background: #040404;
}

.head {
  width: 650rpx;
  margin: 0 auto;

  > view {
    overflow: hidden;
    color: #fff;
    font-size: 40rpx;
    text-align: center;
    margin-top: -200rpx;
    position: relative;
    margin-bottom: 30rpx;
  }
}

.canvas {
  position: absolute;
  height: 100vh;
  width: 100%;
  top: 0;
  left: -9999px;
}

.immm {
  display: flex;
  width: 70%;
  margin: 50rpx auto;
  margin-top: 130rpx;
}

.aa {
  width: 75%;
  height: 75%;
  margin: 20px auto 20px auto;
}

.xx {
  height: 25px;
  width: 25px;
  margin: 0 auto;
}

.invite {
  image {
    user-select: none;
    pointer-events: none;
    width: 100%;
    height: 100%;
  }

  > view {
    // display: flex;
  }
}

.eqcode {
  position: relative;
  padding: 14px;
  background-color: #ffffff;
  box-shadow: 0px 4px 7px 2px rgba(182, 37, 38, 0.18),
    0px 0px 11px 3px rgba(234, 68, 70, 0.13);
  border-radius: 8px;
  height: 200rpx;
  width: 200rpx;
  margin: 20rpx auto;

  image {
    user-select: none;
    pointer-events: none;
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}

.tags {
  $raidus: 4px;
  width: 430rpx;
  margin: 0 auto;
  display: flex;
  position: relative;

  & > view {
    margin-top: 26rpx;
    width: 50%;
    text-align: center;
    font-size: 30rpx;
    padding: 16rpx 46rpx;
    margin: 30rpx auto;
  }

  & > view:first-child {
    border-radius: 10rpx;
    background-color: #f8daae;
    color: linear-gradient(#fe3b0f, #fa603a);
  }
}

.image {
  user-select: none;
  pointer-events: none;
  height: 266rpx;
  width: 266rpx;
  position: absolute;
  right: 80rpx;
  top: 32rpx;
}

.text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  padding: 23px 17px;
  text-align: center;
}

.but {
  height: 40px;
  width: 400rpx;
  color: #ffffff;
  border-radius: 20px;
  text-align: center;
  line-height: 38px;
  border: 2px solid #ffffff;
  margin: 50px auto;
}

.dibu {
  position: fixed;
  bottom: 30rpx;
  text-align: center;
  z-index: 99;
  color: #999;
  width: 100%;
  font-size: 22rpx;

  > view {
    margin-top: 20rpx;
  }

  > view > view {
    display: inline-block;
  }

  > view > view:first-child {
    color: #ccc;
    font-size: 28rpx;
  }

  > view > view:last-child {
    font-size: 22rpx;
    margin-left: 10rpx;
  }
}

.fuzhi {
  width: 230rpx;
  right: 100rpx;
  background: #f6bf6f;
  color: #333;
  border-radius: 16rpx;
  position: fixed;
  bottom: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
</style>
